<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="Pragma" content="no-cache">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

</head>

<body>
    <style type="text/css">
        html,
        body,
        ul,
        li,
        dl {
            margin: 0;
            padding: 0;
        }

        .j02 {
            width: 906px;
            margin: 0 auto;
        }

        .j02 .product {
            width: 800px;
            height: 900px;
            margin-right: 20px;
            margin-bottom: 20px;

        }

        .j02 .product:nth-of-type(3n) {
            margin-right: 0;
        }

        .j02 .product-box {
            width: 1208px;
            margin-right: -20px;
        }



        .product {
            position: relative;
            float: left;
            background: #fff;
            line-height: 1.5;
            overflow: visible;
            z-index: 1;
        }

        .product:hover {
            overflow: visible;
            z-index: 3;
        }

        .product:hover .iwrap {
            margin: -3px;
            border: 4px solid #f83760;
            -webkit-transition: border-color .2s ease-in;
            -moz-transition: border-color .2s ease-in;
            -ms-transition: border-color .2s ease-in;
            -o-transition: border-color .2s ease-in;
            transition: border-color .2s ease-in;
        }

        .iwrap {
            display: block;
            position: absolute;
            background: #fff;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            border: 1px solid #ececec;
            box-sizing: content-box;
        }

        .iwrap img {
            width: 100%;
            margin-bottom: 10px;
        }

        .iwrap p.line1 {
            margin-left: 10px;
            margin-right: 10px;
            color: #333;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .iwrap p.line2 {
            margin-left: 10px;
            margin-right: 10px;
            margin-bottom: 13px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .iwrap .line3 {
            position: absolute;
            bottom: 0;
            background: #f8f8f8;
            width: 100%;
            height: 56px;
        }

        .iwrap .line3 dd {
            display: block;
            float: left;
            line-height: 1;
        }

        .iwrap .line3 .c1 {
            width: 35%;
            font-size: 26px;
            overflow: hidden;
            white-space: nowrap;
        }

        .iwrap .rmb {
            display: block;
            float: left;
            font-size: 16px;
            padding-left: 0.5em;
        }

        .iwrap .money {
            display: block;
            float: left;
        }

        .iwrap .line3 .c2 {
            min-width: 22%;
            max-width: 28%;
            height: 56px;
            box-sizing: border-box;
            overflow: hidden;
            text-align: center;
        }

        .iwrap .triangle {
            display: block;
            float: left;
            width: 0;
            height: 0;
            box-sizing: border-box;
            border-width: 28px 14px 28px 14px;
            border-style: solid;
            border-color: #f8f8f8 #f73760 #f8f8f8 #f8f8f8;
        }

        .iwrap .line3 .c3 {
            width: 40%;
            height: 56px;
            background: #f73760;
            color: #fff;
            line-height: 56px;
            text-align: center;
            float: right;
            cursor: pointer;
        }

        /* ******** 商品展示:图片列表 end  *********** */
        /**弹框**/
        .dialogBox {
            position: absolute;
            margin: 0 auto;
            margin-top: 60px;
            text-align: center;
            border: 1px solid #d2d2d2;
            z-index: 999;

        }

        .dialogDiv {
            display: none;
        }

        .form-item {
            margin: 50px 0;
            width: 300px;
            height: 35px;
        }

        .form-item::after {
            content: attr(data-msg);
            color: red;
            font-size: 12px;
            display: none;
        }

        .form-item.err::after {
            display: block;
        }

        .form-item input {
            outline: none;
            width: 100%;
            height: 100%;
            font-size: 18px;
        }

        .form-item.err input {
            border-color: red;
        }
    </style>
    <div id="main">
        <section :class="['form-item', {'err':err}]" data-msg="输入4~8个字母、数字、下划线，">
            <input type="text" placeholder="请输入用户名" v-model="username">
            <!--v-model="username" input的值与我们data的username-->
        </section>
    </div>
    <div style="width: 100px;height: 300px;">

    </div>
        <div id="list">
            <div class="j02 main clearfix">
                <!-- 把这段代码重复copy 6次 start -->
                <div class="product">
                    <div target="_blank" class="iwrap">
                        <img :src="img_url">
                        <p class="f16 line1"></p>
                        <p class="f12 line2 red"></p>
                        <dl class="line3">
                            <dd class="c2 red"><span class="rmb">￥1万</span></dd>
                            <dd class="c3 f16"><i class="triangle"></i>购买</dd>
                        </dl>
                    </div>
                </div>
                <!-- 把这段代码重复copy 6次  end-->
            </div>
        </div>

        <div>
      
    </div>


</body>
<script>


    let vue = new Vue({
        el: '#main',
        data: {
            deadline: 0,
            img_url: 'https://youjia-image.cdn.bcebos.com/modelImage/3e7fc7749996492ca2cc392bab734a21/1628501201288910972d.JPG',
            new_url: 'http://baidu.com',
            username:'',
            err:false,

        },

        methods:{


        },

        mounted:function(){//挂在到了 el绑定的元素
            let that = this
            setInterval(function(){
                console.log(1);
                let num = Math.round(Math.random() * 10);
                that.username=randomString(num);//把username赋值 随机字符串，username是不是一直在变化

            },1);
                    
        },

        computed: {
            imgurl: {
                // getter,只要调用 imgurl,自动触发了,计算属性默认只由get
                get() {
                    console.log("触发了get");
                    return this.img_url;
                },
                // setter,只要给 imgurl 赋值，就自动触发
                set(val) {
                    console.log("触发了set");
                    this.img_url = val;
                }
            }
        },
        watch: {
            img_url: function (val, oldvalue) {
                console.log('触发了监听器');
                console.log(val, oldvalue);
            },
            username(val) {
                //正则的判断 test 返回true 和 false
                this.err = !/^\w{4,8}$/.test(val);
            }

        }
    });

    //随机生成字符串
    function randomString(e) {
        e = e || 32;
        var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
            a = t.length,
            n = "";
        for (i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
        return n
    }

</script>

</html>